<template>
  <div class="mod-crm__crmpersonjoin">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-button @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="state.exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('crm:crmpersonjoin:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="state.hasPermission('crm:crmpersonjoin:delete')" type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="psjId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjFirstEName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjLastEName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjGender" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComEName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjTrade" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjLevel" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjJoinType" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjType" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCountryCode" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCityCode" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjContinent" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCountry" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjArea" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjProvince" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCity" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjDistrict" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjWebUrl" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEmail" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEmail1" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjAddress" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEAddress" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjMobile" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjMobile1" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjTel" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjTel1" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjTel2" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjQq" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjFax" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjFax1" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjFax2" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjOtherLinkInfo" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjZipCode" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjRank" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjERank" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjDept" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEDept" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjUnifyRank" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjUnifyDept" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIdCard" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psnId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfFirst" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjRemark" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjExtField1" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjExtField2" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="creatorId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="modifierId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="deleterId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjGroup" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjQuality" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjSource" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjPreExhId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjRestDay" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjRestTime" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjVisibility" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjVisitorCard" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCurrentCard" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjAnswer" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComTradeKey1" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComTradeKey2" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComNameKey" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComCityKey" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjComModelKey" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjSysState" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCreateTime" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjFlag" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfTreatKey" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfTreatRepeat" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfTreatCom" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfTelChk" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfFaxChk" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfMailChk" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfMobChk" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfAddChk" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjVoucherId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="comId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="atrId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjVoucherType" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjLanguage" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjMsn" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfReceive" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjBsn" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjBsntxt" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjLagCode" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjPostAddress" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEAddress2" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEAddress3" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEAddress4" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjSurName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjLastName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjInviteCode" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjIfPostCard" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjWeixin" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="groupId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjGroupId" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjAnswersNum" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjAnswersTitle" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjRegCountry" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjMiddleEName" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjAntionality" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjAlipay" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjCounty" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjSex" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjPhoto" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjEmployeescard" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psndaltetime" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="psjMainProduct" label="" header-align="center" align="center"></el-table-column>
      <el-table-column prop="delFlag" label="删除标记 0未删除，1已删除" header-align="center" align="center"></el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('crm:crmpersonjoin:update')" type="primary" link @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button v-if="state.hasPermission('crm:crmpersonjoin:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./crmpersonjoin-add-or-update.vue";

const view = reactive({
  getDataListURL: "/crm/crmpersonjoin/page",
  getDataListIsPage: true,
  exportURL: "/crm/crmpersonjoin/export",
  deleteURL: "/crm/crmpersonjoin",
  deleteIsBatch: true,
  dataForm: {
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });


const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (psjId?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(psjId);
  });
};
</script>